<template>
	<div>
		<!--  将数据的集合与data绑定  里面的prop属性再与集合中的字段绑定  -->
		<el-table
				:data="tableData"
				border
				style="width: 100%">
			<el-table-column
					fixed
					prop="birthday"
					label="生日"
					width="150">
			</el-table-column>
			<el-table-column
					prop="userName"
					label="姓名"
					width="120">
			</el-table-column>
			<el-table-column
					prop="phone"
					label="电话"
					width="120">
			</el-table-column>
			<el-table-column
					label="性别"
					width="120" prop="gender">
			</el-table-column>
			<el-table-column
					prop="address"
					label="地址"
					width="300">
			</el-table-column>
			<el-table-column
					fixed="right"
					label="操作"
			>
				<template slot-scope="scope">
					<el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
					<el-button @click="deletes(scope.row)" type="text" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页显示 -->
		<el-pagination
				background
				layout="prev, pager, next"
				:total="total"
				:page-size="6"
				@current-change="page">
		</el-pagination>
	</div>
</template>

<script>
	
  export default {
	  data() {
	    return {
	      tableData:[],
		  total:0,
		  totalPages:0
	        
	    }
	},
		
		methods:{
			//  row当前选中行的所有数据对象
		   handleClick(row) {
			  this.$router.push({
				  //  路由传值
				   path:'/userSave',
				   query:{
					   id:row.id
				   }
			   })
		  },
		  page(currentPage){
			  let that  = this;
			 this.$axios.get('http://localhost:8181/findAll/'+currentPage+'/6').then((response) => {
			 	 that.tableData =response.data.content;
			  })
		  },
		  deletes(row){			
			  this.$axios.get('http://localhost:8181/delete/'+row.id).then((response) => {
			  	 window.location.reload()  //刷新页面
			   })
		  }
		},
	// 页面加载就执行
	created() {
		let that  = this;
		this.$axios.get('http://localhost:8181/findAll/1/6').then((response) => {
			 that.tableData =response.data.content	
			 that.total = response.data.totalElements
			 that.totalPages = response.data.pageable.paegsize		 		  
         })	
    }
  }

</script>